<template>
  <el-form
    ref="form"
    :model="form"
    label-width="80px"
    class="add-form">
    <el-form-item
      label="背调报告" >
      <!-- 合作伙伴，修改时，完整上传组件 -->
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button
          size="small"
          type="primary">点击上传</el-button>
        <div
          slot="tip"
          class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
    <el-form-item
      label="业务区域"
      class="partnerDataPicker">
      <el-col
        :span="11">
        <el-date-picker
          v-model="form.startTime"
          type="date"
          placeholder="开始日期"/>
      </el-col>
      <el-col
        class="line"
        :span="2"> -
      </el-col>
      <el-col
        :span="11">
        <el-date-picker
          v-model="form.endTime"
          placeholder="结束日期" />
      </el-col>
    </el-form-item>
    <el-form-item
      prop="company"
      label="背调公司">
      <el-input
        v-model="form.company"
        placeholder="请输入" />
    </el-form-item>
    <el-form-item
      label="维护时间"
      prop="serviceTime">
      <el-date-picker
        v-model="form.serviceTime"
        type="date"
        placeholder="开始日期"/>
    </el-form-item>
    <el-form-item
      prop="desc"
      label="备注">
      <el-input
        type="textarea"
        v-model="form.desc"
        placeholder="请输入" />
    </el-form-item>
  </el-form>

</template>
<script>
export default {
  name: 'AddForm',
  data () {
    return {
      form: {
        company: '',
        startTime: '',
        endTime: '',
        serviceTime: '',
        desc: ''
      },
      fileList: []
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    search () {
      this.$emit('search')
    },
    reset () {
      this.$refs['form'].resetFields()
    }
  }
}
</script>
<style scoped lang="less">

</style>
